<template>
  <div>
    <div class="receive-view">
      <div class="main-container">
        <el-tabs v-model="activeTabPane">
          <el-tab-pane :label="$t('tab.receive_btc')" name="btc">
            <div class="receive-box">
              <ul class="notes-list">
                <li>請勿將 BCC / BCH / LTC / USDT 發送到您的比特幣 (BTC) 地址，否則資金將會遺失。比特幣交易需要六個區塊確認，可能需花費一個小時才能完成。</li>
              </ul>
              <div class="address-info">
                <el-row>
                  <el-col :span="12">
                    <h3>提供此地址給發送方以接收比特幣：</h3>
                  </el-col>
                </el-row>
                <el-row>
                  <el-col :span="12">
                    <el-input value="35iSwueHgVwMfg6j7aPnJtDMwPsGXLaTj3" readonly onclick="this.select()"></el-input>
                  </el-col>
                </el-row>
                <el-row>
                  <el-col :span="12">
                    <div class="qrcode-box"><img src="../../assets/image/test/qrcode.png"></div>
                  </el-col>
                </el-row>
                <el-row>
                  <el-col :span="24">
                    <div class="address-list">
                      <el-table :data="addressData" stripe style="width: 100%">
                        <el-table-column prop="address" label="地址" width="360"></el-table-column>
                        <el-table-column prop="tag" label="標籤" width="180"></el-table-column>
                        <el-table-column prop="date" label="創建日期"></el-table-column>
                        <el-table-column label=""></el-table-column>
                      </el-table>
                    </div>
                    <el-button type="primary">獲取新地址</el-button>
                  </el-col>
                </el-row>
              </div>
            </div>
          </el-tab-pane>
          <el-tab-pane :label="$t('tab.receive_eth')" name="eth">
            <div class="receive-box">
              <ul class="notes-list">
                <li>MaiCoin 不支援智能合約（多數的 ICO 均使用智能合約），請確認您是透過傳統交易的形式來發送或接收以太幣。任何透過智能合約傳送以太幣所造成的損失，使用者須自行負責。</li>
              </ul>
              <div class="address-info">
                <el-row>
                  <el-col :span="12">
                    <h3>提供此地址給發送方以接收以太币：</h3>
                  </el-col>
                </el-row>
                <el-row>
                  <el-col :span="12">
                    <el-input value="35iSwueHgVwMfg6j7aPnJtDMwPsGXLaTj3" readonly onclick="this.select()"></el-input>
                  </el-col>
                </el-row>
                <el-row>
                  <el-col :span="12">
                    <div class="qrcode-box"><img src="../../assets/image/test/qrcode.png"></div>
                  </el-col>
                </el-row>
                <el-row>
                  <el-col :span="24">
                    <div class="address-list">
                      <el-table :data="addressData" stripe style="width: 100%">
                        <el-table-column prop="address" label="地址" width="360"></el-table-column>
                        <el-table-column prop="tag" label="標籤" width="180"></el-table-column>
                        <el-table-column prop="date" label="創建日期"></el-table-column>
                        <el-table-column label=""></el-table-column>
                      </el-table>
                    </div>
                    <el-button type="primary">獲取新地址</el-button>
                  </el-col>
                </el-row>
              </div>
            </div>
          </el-tab-pane>
          <el-tab-pane :label="$t('tab.receive_ltc')" name="ltc">
            <div class="receive-box">
              <ul class="notes-list">
                <li>請勿將 BCC / BCH / BTC / USDT 發送到您的萊特幣 (LTC) 地址，否則資金將會遺失。萊特幣交易需要六個區塊確認，可能需花費一個小時才能完成。</li>
              </ul>
              <div class="address-info">
                <el-row>
                  <el-col :span="12">
                    <h3>提供此地址給發送方以接收莱特币：</h3>
                  </el-col>
                </el-row>
                <el-row>
                  <el-col :span="12">
                    <el-input value="35iSwueHgVwMfg6j7aPnJtDMwPsGXLaTj3" readonly onclick="this.select()"></el-input>
                  </el-col>
                </el-row>
                <el-row>
                  <el-col :span="12">
                    <div class="qrcode-box"><img src="../../assets/image/test/qrcode.png"></div>
                  </el-col>
                </el-row>
                <el-row>
                  <el-col :span="24">
                    <div class="address-list">
                      <el-table :data="addressData" stripe style="width: 100%">
                        <el-table-column prop="address" label="地址" width="360"></el-table-column>
                        <el-table-column prop="tag" label="標籤" width="180"></el-table-column>
                        <el-table-column prop="date" label="創建日期"></el-table-column>
                        <el-table-column label=""></el-table-column>
                      </el-table>
                    </div>
                    <el-button type="primary">獲取新地址</el-button>
                  </el-col>
                </el-row>
              </div>
            </div>
          </el-tab-pane>
        </el-tabs>
        <div class="faq">
          <h4>常見問題</h4>
          <ul class="notes-list">
            <li>如何接收數位資產？</li>
            <li>從外部錢包轉移數位資產至 MaiCoin 錢包時，需要多少時間？</li>
            <li>為何從外部傳送比特幣至 MaiCoin 錢包，但一直沒收到？</li>
            <li>可以獲取新的地址嗎？舊的地址還能用嗎？</li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { mapState } from 'vuex'
export default {
  data () {
    return {
      activeTabPane: this.$route.params.coin ? this.$route.params.coin : 'btc',
      addressData: [{
        address: '35iSwueHgVwMfg6j7aPnJtDMwPsGXLaTj3',
        tag: '',
        date: '04/02/18'
      }]
    }
  },
  computed: {
    ...mapState({
      path: state => state.route.path
    })
  },
  methods: {
  },
  watch: {
    path () {
      this.activeTabPane = this.$route.params.coin ? this.$route.params.coin : 'btc'
    }
  },
  created () {
  }
}
</script>

<style lang="less">
  .receive-view{
    .notes-list{
      padding-left: 15px;
      li{
        list-style: disc;
        font-size: 12px;
        line-height: 135%;
        color: #666;
        padding-bottom: 5px;
      }
    }
    .receive-box{
      .address-info{
        h3 {
          color: #333;
          margin: 30px 0 10px 0;
          font-size: 18px;
          font-weight: 400;
        }
        .qrcode-box{
          margin: 15px 0 30px 0;
        }
      }
      .address-list {
        margin-bottom: 20px;
      }
    }
    .faq{
      margin: 30px 0;
      border-top: 1px dashed #ccc;
      padding-top: 30px;
      h4{
        margin-bottom: 10px;
        font-size: 14px;
        font-weight: 400;
      }
    }
  }
</style>
